<template>
  <view class="page">
    <Header :title="'我的'"></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'我的-今日复习-' + dateTime"> </Breadcrumb>
        <view class="content">
          <view class="select">
            <view class="select_content">
              <view class="select_title">章节筛选：</view>
              <view class="select_box">
                <u-input
                  :border="false"
                  type="select"
                  :select-open="selectShow1"
                  v-model="chapterId"
                  placeholder="请选择章节"
                  placeholder-style="color: #fff;"
                >
                </u-input>
              </view>
            </view>
            <view class="select_content">
              <view class="select_title">打卡次数：</view>
              <view class="select_box">
                <u-input
                  :border="false"
                  type="select"
                  :select-open="selectShow2"
                  v-model="chapterId"
                  placeholder="请选择打卡次数"
                  placeholder-style="color: #fff;"
                >
                </u-input>
              </view>
            </view>
          </view>
          <view class="list">
            <view
              class="item"
              v-for="(item, index) in list"
              :key="index"
              @click="
                switchPage(
                  `/pages/user/todayReviewDetail?id=${item.id}&dateTime=${dateTime}`
                )
              "
            >
              <view class="item_num">
                <text>{{ index + 1 }}</text>
              </view>
              <view class="item_text">
                {{ item.stepName }}（{{ item.fxCount }}/{{ item.wordCount }}）
              </view>
              <view class="item_state active">
                {{ item.complete === 1 ? "已完成" : "未完成" }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-select
      mode="single-column"
      :list="chapterList"
      v-model="selectShow1"
      @confirm="selectConfirm1"
      value-name="id"
      label-name="gradeName"
    ></u-select>
    <u-select
      mode="single-column"
      :list="clockInList"
      v-model="selectShow2"
      @confirm="selectConfirm2"
      value-name="id"
      label-name="gradeName"
    ></u-select>
  </view>
</template>

<script>
import { getFxDetail } from "@/api/sync";
export default {
  components: {},
  data() {
    return {
      dateTime: "",
      list: [],
      chapterList: [],
      selectShow1: false,
      clockInList: [],
      selectShow2: false,
    };
  },
  onLoad(options) {
    this.dateTime = options.dateTime;
    this.getData();
  },
  methods: {
    getData() {
      getFxDetail(this.dateTime).then((res) => {
        this.list = res.data[0].list[0].list;
      });
    },
    switchPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./todayReviewList.scss";
</style>
